<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>测试文档无标题</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<h1>Hello</h1>
	<div id="box"></div>
	<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript">
	let lessons = [
	  { title: "后盾人媒体查询响应式布局", author: "后盾人向军" },
	  { title: "FLEX 弹性盒模型", author: "后盾人" },
	  { title: "GRID 栅格系统后盾人教程", author: "古老师" }
	];

	function links2 (strings, ...values) {
		console.log(strings, ...values) ;

		var cont = [...values].map(item => {
			return item.replace('后盾人', '<a href="#">$&</a>')
		})

		console.log(cont) ;

		strings.map()
		
		return strings;
	}

	// strings的元素个数多于vars元素的个数
	
	function links(strings, ...vars) {
	  console.log(strings) ;
	  console.log(vars) ;
	  
	  return strings
	    .map((str, key) => {
	      return (
	        str + (vars[key] ? vars[key].replace( "后盾人",
	              `<a href="https://www.houdunren.com">后盾人</a>`
	            )
	          : "")
	      ); 
	    })
	    .join("");
	}

	var html = `
		<ul>
			${lessons.map(item => links`<li>${item.author}:${item.title}</li>`).join('')}
		</ul>
	`
	console.log(html) ;
	box.innerHTML = html;
	

	</script>
</body>
</html>